<template>
  <view class="page-header">
    <view class="status_bar"> </view>
    <view>
      <uni-nav-bar
        @clickLeft="returnBack"
        leftIcon="back"
        rightIcon="plusempty"
        color="#FFFFFF"
        backgroundColor="#2878FF"
        :title="title"
        @clickRight="openItems"
      ></uni-nav-bar>
    </view>
    <tui-card
      :header="header"
      style="background-color: #4c4c4c"
      class="tui-card"
      :style="{ display: displayItems }"
    >
      <view slot="body">
        <tui-list-view>
          <tui-list-cell
            style="background-color: #4c4c4c; color: #ffffff"
            :hover="true"
            @click="changeDataOwner"
          >
            <view class="tui-line-cell">
              <view class="tui-title">切换数据拥有者</view>
            </view>
          </tui-list-cell>
          <tui-list-cell
            style="background-color: #4c4c4c; color: #ffffff"
            :hover="true"
            @click="collect"
          >
            <view class="tui-line-cell">
              <view class="tui-title">收藏</view>
            </view>
          </tui-list-cell>
        </tui-list-view>
      </view>
    </tui-card>
  </view>
</template>

<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
import tuiListView from "@/components/thorui/tui-list-view/tui-list-view";
import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell";
import tuiCard from "@/components/thorui/tui-card/tui-card";

export default {
  data() {
    return {
      header: { bgcolor: "#ffffff", line: true, display: false },
      displayItems: "none",
    };
  },
  props: {
    title: {
      type: String,
      default() {
        return "物资到货验收";
      },
    },
  },
  components: {
    uniNavBar,
    tuiListView,
    tuiListCell,
    tuiCard,
  },
  methods: {
    returnBack() {
      uni.navigateBack();
    },
    changeDataOwner() {
      console.log("切换数据拥有者");
    },
    collect() {
      console.log("收藏");
    },
    openItems() {
      console.log(this.displayItems);
      if (this.displayItems == "none") {
        this.displayItems = "block";
      } else {
        this.displayItems = "none";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-header {
  position: fixed;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background-color: #2878ff;
}
.tui-card {
  color: #ffffff;
  font-size: 800rpx;
  margin-top: 20rpx;
  position: absolute;
  margin-left: 450rpx;
  z-index: 99;
}
.tui-line-cell {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 30rpx;
  input {
    font-size: 30rpx;
  }
  &.text-area {
    display: block;
    .tui-title {
      margin-bottom: 30rpx;
    }
  }
}
</style>
